<template>
	<div class="history flex-page-wrapper">
		<uni-nav-bar statusBar color="#fff" backgroundColor="#1E234B" title="在线交流">
		</uni-nav-bar>
		<div class="flex-page">
			<div class="card-title">请完成您的「在线交流」名片</div>
			<uni-forms :modelValue="form" ref="form">
				<uni-forms-item name="avatarUrl" label="头像">
					<wsh-upload v-model="form.avatarUrl" :limitLength="1" text="点击上传" :defaultImg="userInfo.gender != '2' ? 'https://static.inclusionconf.com/static/images/chat/nan.png' : 'https://static.inclusionconf.com/static/images/chat/nv.png'"></wsh-upload>
				</uni-forms-item>

				<uni-forms-item class="history-item" :label="$t('login.history.ot0e2w')">
					<uni-easyinput :value="userInfo.name" disabled></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.register.m2nrsw')">
					<uni-easyinput :value="zdToLabel('position', userInfo.position)" disabled></uni-easyinput>
					<div style="height: 6px;" v-if="form.position == 'other (please_specify)' && form.positionDesc"></div>
					<uni-easyinput v-if="form.position == 'other (please_specify)'" v-model="form.positionDesc" :placeholder="$t('login.register.g17g74')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" label="公司全称">
					<uni-easyinput :value="userInfo.companyName" disabled></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" label="工作邮箱" name="email" required :rules="[{ required: true, errorMessage: '请输入工作邮箱', trigger: 'blur' }]">
					<uni-easyinput v-model="form.email" placeholder="请输入工作邮箱"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item class="history-item" :label="$t('login.register.03uwoy')" name="industry" required :rules="[{ required: true, errorMessage: $t('login.register.35gk4d'), trigger: 'blur' }]">
					<dict-select v-model="form.industry" :options="zd.business_industry" :placeholder="$t('login.register.35gk4d')"></dict-select>
					<div style="height: 6px;" v-if="form.industry == 'other'"></div>
					<uni-easyinput v-if="form.industry == 'other'" v-model="form.industryOtherDesc" :placeholder="$t('login.register.g17g74')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" label="参会目的（可多选）" name="fieldDirection" required :rules="[{ required: true, errorMessage: '请选择参会目的', trigger: 'blur' }]">
					<uni-data-checkbox multiple v-model="form.fieldDirection" :localdata="zd.field_direction_type"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item class="history-item" label="是否对外展示参会目的" name="showDirection" required>
					<wsh-switch v-model="form.showDirection"></wsh-switch>
				</uni-forms-item>
				<uni-forms-item class="history-item" label="是否开通在线交流功能" name="openExchange" required>
					<wsh-switch v-model="form.openExchange"></wsh-switch>
					<view class="">
						开通在线交流功能，拓展人脉商机。
					</view>
				</uni-forms-item>
			</uni-forms>
			<div class="login3" @click="checked = !checked">
				<view class="span check" :class="checked ? 'checked' : ''"></view>
				{{ $t('login.index.357394-0') }}
				<view class="span login3-1" @click.stop="() => $refs.gzZcRef.getGz()">《外滩大会产业对接会项目征集用户协议》</view>
			</div>
			<div class="btns">
				<div class="btn disabled" v-if="!checked">{{$t('login.register.gx1t0q')}}</div>
				<div class="btn active" v-else @click="submit">{{$t('login.register.gx1t0q')}}</div>
			</div>
		</div> 
		<pub-zc-gz ref="gzZcRef" @close="zcAgreeHandle" />
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import PubZcGz from './components/zc-gz.vue'


	export default {
		components: {
			PubZcGz
		},
		data() {
			return {
				form: {
					"avatarUrl": '',
					"email": "",
					"fieldDirection": "",
					"fieldDirectionDesc": "",
					"industry": "",
					"industryOtherDesc": "",
					"showDirection": "yes",
					"openExchange": "yes"
				},
				userInfo: {},
				checked: false,
				update: ''
			}
		},
		onLoad(options) {
			this.update = options.update
		},
		onShow() {
			this.getPersonDetail(this)
			if (this.update == 1) {
				this.getDetail()
			}
		},
		methods: {
			getDetail() {
				protal.businesscarddetail().then(res => {
					this.detail = res.data
					
					this.form = {
						"avatarUrl": this.detail.avatarUrl,
						"email": this.detail.email,
						"fieldDirection": this.detail.fieldDirection ? this.detail.fieldDirection.split(',') : [],
						"fieldDirectionDesc": this.detail.fieldDirectionDesc,
						"industry": this.detail.industry,
						"industryOtherDesc": this.detail.industryOtherDesc,
						"showDirection": this.detail.showDirection,
					}
				})
			},
			zcAgreeHandle(t) {
				this.checked = true
			},
			submit() {
				this.$refs.form.validate(valid => {
					if (!valid) {
						const params = JSON.parse(JSON.stringify(this.form))
						params.fieldDirection = params.fieldDirection.join(',')
						let str = 'businesscardadd'
						if (this.update == 1) {
							str = 'businesscardupdate'
						}
						if (!params.avatarUrl) {
							if (this.userInfo.gender != '2') {
								params.avatarUrl = 'https://static.inclusionconf.com/static/images/chat/upload-nan.png'
							} else {
								params.avatarUrl = 'https://static.inclusionconf.com/static/images/chat/upload-nv.png'
							}
						}
						protal[str](params).then(res => {
							if (res.code == '0000') {
								uni.navigateBack()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.history {
		display: flex;
		flex-direction: column;
		min-height: 100vh;

		.flex-page {
			flex: 1;
			padding-top: 80rpx;
			padding-bottom: 40rpx;
			overflow: auto;
		}
		
		.card-title {
			font-family: inClusionFont;
			font-weight: 400;
			font-size: 24px;
			color: rgba(0,0,0,0.72);
			line-height: 24px;
			font-style: normal;
			text-transform: none;
			margin-bottom: 30px;
			text-align: center;
		}

		h3 {
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 48rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			margin-bottom: 80rpx;
		}

		h4 {
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 28rpx;
			color: #656565;
			line-height: 36rpx;
			font-weight: normal;
			text-align: center;
			font-style: normal;
			padding: 0 30rpx;
			margin: 20rpx 0 80rpx;
		}

		.history-item {
			padding: 0 40rpx;
			margin-bottom: 36rpx;

			.text {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 40rpx;
				color: #676767;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
			}

			/deep/ .el-form-item__label {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 30rpx;
				color: #181818;
				line-height: 30rpx;
				font-style: normal;
				display: flex;
			}

			/deep/ .el-select {
				width: 100%;
			}

			/deep/ .el-input__inner {
				padding: 0 15px;
			}

			/deep/ .el-input {
				margin-top: 20rpx;

				.el-input__inner {
					height: 88rpx;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 30rpx;
					color: #000;
					line-height: 1;
					font-style: normal;
					border-radius: 12rpx;
				}
			}
		}

		.btns {
			padding-bottom: calc(env(safe-area-inset-bottom) + 20px);

			.btn {
				width: 638rpx;
				height: 88rpx;
				background: rgba(0, 0, 50, 0.1);
				border-radius: 44rpx;
				margin: 28rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_2_65_Medium;
				font-size: 32rpx;
				color: #000000;
				line-height: 40rpx;
				font-style: normal;

				&.active {
					background: #784DFF;
					color: #fff;
				}

				&.disabled {
					opacity: 0.5;
				}
			}
		}

		.login3 {
			width: 670rpx;
			margin: 0 auto 14px;
			font-family: AlibabaPuHuiTi_3_45_Light;
			font-size: 12px;
			color: #181818;
			line-height: 19px;
			height: 19px;
			text-align: left;
			font-style: normal;

			.span {
				display: inline;
			}

			.check {
				width: 14px;
				height: 14px;
				border-radius: 50%;
				border: 1px solid RGBA(153, 153, 153, 1);
				display: inline-block;
				transform: translateY(2px);
				position: relative;
				z-index: 1;
				margin-right: 4px;

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 200%;
					height: 20px;
				}

				&.checked {
					border-color: #7C5CFF;
					background: #7C5CFF;
					position: relative;

					&::after {
						content: "";
						box-sizing: content-box;
						border: 1px solid #FFF;
						border-left: 0;
						border-top: 0;
						height: 7px;
						left: 4px;
						position: absolute;
						top: 1px;
						transform: rotate(45deg);
						width: 3px;
						transition: -webkit-transform .15s ease-in .05s;
						transition: transform .15s ease-in .05s;
						transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
						transform-origin: center;
					}
				}
			}

			.login3-1 {
				color: rgba(23, 57, 214, 1);
			}
		}

		/deep/ .uni-data-checklist .checklist-group {
			flex-direction: column !important;

			.checklist-box {
				margin: 10px 0 !important;

				.checkbox__inner {
					border-radius: 0 !important;
				}
			}

			.checklist-text {
				font-size: 15px;
				font-family: AlibabaPuHuiTi_3_45_Light;
				color: #000 !important;
			}

			.is-checked {

				.checkbox__inner {
					background-color: #7C5CFF !important;
					border-color: #7C5CFF !important;
				}
			}
		}
	}
</style>